<script setup>
import { ref } from "vue";
import { getMaterialList } from '@/apis/material'
import { Message } from "tdesign-mobile-vue";
import defaultImg from "../../../assets/material.png"

const key = ref('');
const count = ref(0);
const current_page = ref(1);
const last_page = ref(1);
const result = ref([]);
const isLoading = ref(false);

function searchFunc() {
  isLoading.value = true;
  getMaterialList(`key=${key.value}&page=${current_page.value}`)
    .then(res => {
      const { code, msg, data } = res.data;
      if (code === 1) {
        result.value = data.data;
        count.value = data.total;
        current_page.value = data.current_page;
        last_page.value = data.last_page;
      } else {
        Message.error({
          content: msg,
          context: document.querySelector('main'),
          offset: [8, 8]
        })
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}
</script>
<template>
  <main>
    <div class="search-container">
      <t-search type="search" v-model="key" placeholder="请输入关键字" @submit="searchFunc"></t-search>
    </div>

    <div id="loading" v-if="isLoading">
      <t-loading></t-loading>
    </div>

    <div id="noloading" v-else>
      <div class="preview">
        共 {{ count }} 条结果
      </div>

      <template v-if="count < 1">
        <t-empty description="这里是空的">
          <template #icon>
            <t-icon name="info-circle"></t-icon>
          </template>
        </t-empty>
      </template>

      <template v-if="count > 0">
        <t-cell-group>
          <t-cell v-for="item in result" :title="item.name" :key="item.id"
            :image="item.cover_info?.url !== null ? item.cover_info?.url : defaultImg">
            <template #description>
              <t-tag style="margin: 4px;">物品编码: {{ item.material_id }}</t-tag>
              <t-tag style="margin: 4px;" theme="success">物品规格: {{ item.specs }}</t-tag>
              <t-tag style="margin: 4px;" theme="primary">库存数量: {{
                item.total || 0
              }}
              </t-tag>
            </template>
          </t-cell>
        </t-cell-group>
      </template>
    </div>
  </main>
</template>
<style scoped lang="less">
.search-container {
  background-color: #0052d9;
  padding: 8px;
}

.preview {
  padding: 8px;
  font-weight: 600;
}
</style>